<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mps-deploy</title>
  <style>
    html,
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    p,
    blockquote,
    pre,
    hr,
    figure,
    table,
    caption,
    th,
    td,
    form,
    fieldset,
    legend,
    input,
    button,
    textarea,
    menu {
      margin: 0;
      padding: 0;
    }

    header,
    footer,
    section,
    article,
    aside,
    nav,
    hgroup,
    address,
    figure,
    figcaption,
    menu,
    details {
      display: block;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    caption,
    th {
      text-align: left;
      font-weight: normal;
    }

    html,
    body,
    fieldset,
    img,
    iframe,
    abbr {
      border: 0;
    }

    i,
    cite,
    em,
    var,
    address,
    dfn {
      font-style: normal;
    }

    [hidefocus],
    summary {
      outline: 0;
    }

    li {
      list-style: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    small {
      font-size: 100%;
    }

    sup,
    sub {
      font-size: 83%;
    }

    pre,
    code,
    kbd,
    samp {
      font-family: inherit;
    }

    q:before,
    q:after {
      content: none;
    }

    textarea {
      overflow: auto;
      resize: none;
    }

    label,
    summary {
      cursor: default;
    }

    a,
    button {
      cursor: pointer;
    }

    body,
    textarea,
    input,
    button,
    select,
    keygen,
    legend {
      outline: 0;
    }

    body {
      background: #fff;
      font-size: 12px;
      font-family: "微软雅黑", Arial, "宋体", Tahoma, sans-serif;
    }

    a,
    a:hover {
      color: inherit;
      text-decoration: none;
    }

    .clearfix:after,
    .clearfix:before {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

    .header {
      width: 100%;
      height: 80px;
      background: rgba(96, 150, 230, 0.9);
      text-align: center;
      line-height: 80px;
      color: #ffffff;
      font-size: 24px;
      font-weight: bold;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
      padding-top: 20px;
    }

    .container .left,
    .container .right {
      float: left;
    }

    .container .left {
      width: 65%;
      margin-right: 5%;
    }

    .container .right {
      width: 30%;
      padding: 15px;
      box-sizing: border-box;
      border: 1px solid #6096E6;
      border-radius: 10px;
      min-height: 550px;
    }

    .container .left .left-item {
      width: 100%;
      padding: 15px 0;
      border-bottom: 1px solid #e5e5e5;
    }

    .container .left .left-item h3 {
      font-size: 20px;
      color: #333333;
    }

    .container .left .left-item .flex-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .container .left .left-item .btn {
      display: inline-block;
      padding: 0 20px;
      line-height: 36px;
      border-radius: 4px;
      background: #6096E6;
      color: #ffffff;
      font-size: 16px;
    }

    .container .left .left-item .path-input {
      display: block;
      margin-top: 10px;
      border: none;
      border: 1px solid #6096E6;
      border-radius: 4px;
      padding: 10px;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    .list-box .list-item {
      padding: 15px 20px;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
    }

    .list-box .list-item .del-list-item {
      position: absolute;
      top: 0;
      right: 20px;
      color: #6096E6;
      font-size: 16px;
    }

    .list-box .list-item .input-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding-top: 20px;
    }

    .list-box .list-item .input-item>p {
      width: 100px;
      font-size: 16px;
      margin-right: 10px;
    }

    .list-box .list-item .input-item>input {
      display: block;
      border: none;
      border: 1px solid #6096E6;
      border-radius: 4px;
      padding: 10px 10px;
      font-size: 16px;
      flex: 1;
      color: #666666;
    }

    .container .left .submit-btn {
      display: block;
      width: 30%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 18px;
      background: #6096E6;
      margin: 20px auto;
      border-radius: 8px;
      border: 1px solid #4D7ABD;
      user-select: none;
    }

    .container .left .submit-btn:active {
      opacity: 0.8;
    }

    .container .right>h3 {
      font-size: 18px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e5e5e5;
    }

    .container .right .no-data {
      text-align: center;
      font-size: 16px;
      color: #999999;
      margin-top: 200px;
      display: none;
    }

    .work-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #e5e5e5;
      justify-content: space-between;
      font-size: 14px;
    }

    .work-item .name {
      flex: 1;
      line-height: 24px;
    }

    .work-item .state {
      margin-left: 10px;
    }

    .work-item .state.success {
      color: #1AAD19;
    }

    .work-item .state.danger {
      color: #E64340;
    }
  </style>
</head>

<body>
  <div class="header">mps-deploy 小程序批量发布助手</div>
  <div class="container clearfix">
    <div class="left">
      <!-- <div class="left-item">
        <div class="flex-box">
          <h3>1、下载小程序最新包</h3>
          <a href="" target="_blank" class="btn">下载</a>
        </div>
      </div> -->
      <div class="left-item">
        <h3>1、填写下载小程序包的解压路径</h3>
        <div class="input-box">
          <input type="text" class="path-input" name="path">
        </div>
      </div>
      <div class="left-item">
        <div class="flex-box">
          <h3>2、小程序发布列表</h3>
          <a href="javascript:;" class="btn" id="addAppId">新增</a>
        </div>
      </div>
      <div class="list-box">
        <div class="list-item">
          <div class="input-item">
            <p>小程序名称</p>
            <input type="text" name="name" maxlength="30" placeholder="请输入小程序名称">
          </div>
          <div class="input-item">
            <p>appid</p>
            <input type="text" name="appid" placeholder="请输入小程序appid">
          </div>
          <div class="input-item">
            <p>key文件路径</p>
            <input type="text" name="key" placeholder="请输入key文件路径">
          </div>
        </div>
      </div>
      <a href="javascript:;" class="submit-btn" id="startUpload">启 动</a>
    </div>
    <div class="right">
      <h3>任务列表</h3>
      <div class="no-data">暂无数据</div>
      <div class="work-list">

      </div>
    </div>
  </div>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    $(function () {
      console.log([
        "",
        " Mps-deploy v0.1.3",
        " Author: Leeeink ",
        " License: MIT",
        " Repository: https://gitee.com/leeeink/mps-deploy",
        " "
      ].join('\n'))

      // 新增
      $('#addAppId').click(function () {
        let html = `<div class="list-item">
          <a href="javascript:;" class="del-list-item">删除</a>
          <div class="input-item">
            <p>小程序名称</p>
            <input type="text" name="name" maxlength="30">
            </div>
            <div class="input-item">
              <p>appid</p>
              <input type="text" name="appid">
              </div>
              <div class="input-item">
                <p>key文件路径</p>
                <input type="text" name="key">
              </div>
        </div>`
        $('.list-box').append(html)
      })
      // 删除对应的item
      $(document).on('click', '.del-list-item', function () {
        $(this).parents('.list-item').remove()
      })

      $('#startUpload').click(function () {
        let params = {
          project: $('input[name="path"]').val(),
          type: "miniProgram",
          es6: true,
          deploy: []
        }
        if (params.project === '') {
          alert('请输入解压路径')
          return
        }
        $('.list-box .list-item').each(function () {
          if ($(this).find('input[name="key"]').val() === '') {
            alert('请输入key文件路径')
            return false
          }
          if ($(this).find('input[name="appid"]').val() === '') {
            alert('请输入小程序appid')
            return false
          }
          if ($(this).find('input[name="name"]').val() === '') {
            alert('请输入小程序名称')
            return false
          }
          params.deploy.push({
            key: $(this).find('input[name="key"]').val(),
            appid: $(this).find('input[name="appid"]').val(),
            name: $(this).find('input[name="name"]').val()
          })
        })
        console.log(params)
        $.ajax({
          url: 'http://192.168.6.36:8889/postdata',
          type: 'post',
          data: JSON.stringify(params),
          dataType: 'json',
          success: function (res) {
            $('#startUpload').css({display: 'none'})
            $('.work-list').empty()
            getResult()
          },
          error: function (err) {
            console.log('error: ' + JSON.stringify(err))
          }
        })
      })
    })

    let template = `<div class="work-item">
          <p class="name">{{name}}</p>
          <p class="state success">{{type-text}}</p>
        </div>`

    function getResult() {
      window.getResultClock = setInterval(() => {
        $.ajax({
          url: 'http://192.168.6.36:8889/result',
          type: 'get',
          dataType: 'json',
          success: function (res) {
            console.log(res.data, 'result')
            if (res.data.length === 0) return
            $('.work-list').empty()
            let t = ''
            res.data.forEach(item => {
              console.log(item, 'item')
              t = template
              t = t.replace('{{name}}', item.app + item.speed)
              t = t.replace('{{type-text}}', item.status)              
              $('.work-list').append(t)
            })
            if (res.type === 'end') {
              window.clearInterval(window.getResultClock)
              $('#startUpload').css({display: 'block'})

            }
          },
          error: function (err) {
            console.log('error: ' + JSON.stringify(err))
            $('#startUpload').css({display: 'block'})

          }
        })
      }, 1500)

    }
  </script>
</body>

</html>